<template>
  <div class="search">
    <el-input :placeholder="placeholderText" keyboard="true" v-model="keyWodrs">
      <template #append>
        <el-button @click="handleSearch">搜索</el-button>
      </template></el-input
    >
  </div>
</template>
<script lang="ts" name="search" setup>
import { toRefs, ref } from 'vue'
// 声明props
const props = defineProps({
  placeholderText: {
    default: '请输入搜索条件',
    type: String
  }
})
// 声明传值
const emit = defineEmits(['emitKeywords'])
const keyWodrs = ref<string>('') //搜索条件
// 定义变量
const { placeholderText } = toRefs(props)
// 定义方法
const handleSearch = () => {
  let keyWords = keyWodrs.value
  emit('emitKeywords', keyWords)
} //搜索
</script>
<style lang="scss">
.search {
  width: 100%;
  height: 100%;

  .search-height {
    height: 40px;
  }
}
</style>
